<template>
  <div ref="chart"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted, watch } from 'vue'
const map = new WeakMap()
interface Props {
  options: any
}
const chart = ref(null)
const props = defineProps<Props>()

const drawPie = () => {
  const element = chart.value
  if (element) {
    const myChart = map.get(element) || echarts.init(element);
    myChart.clear();
    myChart.setOption(props.options);
    map.set(element, myChart)
  }
}

watch(() => props.options, () => {
  drawPie()
})

onMounted(() => {
  drawPie()
})
</script>